<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <el-popover v-model:visible="show" popper-class="no-padding-popover" placement="bottom" width="240" trigger="click">
    <div v-loading="loading" class="wk-field-set">
      <el-input v-model="search" class="wk-field-set__search" placeholder="搜索字段" @input="searchClick"/>

      <div class="wk-field-set__content">
        <draggable v-model="copyFields" :options="{ dragClass: 'sortable-drag', forceFallback: false }">
          <div v-for="(item, index) in copyFields" :key="index" class="wk-field-set__content--item text-one-line">
            <el-switch v-model="item.check"/>
            <span v-if="item.center">{{ item.left }}<span class="input-word">{{ item.center }}</span>{{
                item.right
              }}</span>
            <span v-else>{{ item.name }}</span>
          </div>
        </draggable>
      </div>

      <div class="wk-field-set__ft">
        <el-button link @click="reSet">重置</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
    <template v-slot:reference>
      <slot v-if="$slots.reference" @click="show = !show"/>
      <i v-else class="wk wk-config table-set" @click="show = !show"/>
    </template>
  </el-popover>
</template>

<script setup>
import {objDeepCopy} from '/src/utils/index.js'
import Draggable from 'vuedraggable'
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";
/** 字段管理 */

defineOptions({
  name: 'WkFieldSet',

})

const props = defineProps({
  loading: Boolean,
  fields: Array
})

const emits = defineEmits(['save'])


const show = ref(false)
// 用于重置
const copyFields = ref([])
const search = ref('')


watch(() => props.fields, () => {
  copyFields.value = objDeepCopy(props.fields)
}, {
  immediate: true
})


/**
 * 搜索操作
 */
function searchClick() {
  // todo whf 这里的field是无法赋值吧
  props.fields = props.fields.map(item => {
    const index = item.name.indexOf(search.value)
    if (index != -1) {
      item.left = item.name.substr(0, index)
      item.center = item.name.substr(index, search.value.length)
      const rightIndex = index + search.value.length
      item.right = item.name.substr(rightIndex, item.name.length - rightIndex)
    } else {
      item.left = ''
      item.center = ''
      item.right = ''
    }
    return item
  })
}


/**
 * 保存更改
 */
function save() {
  const noHideIds = copyFields.value.filter(item => {
    return item.check
  })
  if (noHideIds.length < 2) {
    ElMessage.error({message:'至少要显示两列'})
  } else {
    emits('save', copyFields.value)
  }
}

/**
 * 重置
 */
function reSet() {
  copyFields.value = objDeepCopy(props.fields)
}
</script>

<style lang="scss" scoped>
.wk-field-set {
  &__search {
    padding: 8px 10px 0;
  }

  &__content {
    max-height: 250px;
    min-height: 100px;
    overflow: auto;

    &--item {
      cursor: move;
      padding: 5px 10px;
      font-size: 12px;

      .el-switch {
        transform: scale(0.8);
        margin-right: 3px;

        :deep(.el-switch__core) {
          width: 33px !important;
        }
      }
    }

    &--item:hover {
      background-color: #E7EDF4;
    }
  }

  &__ft {
    overflow: hidden;
    overflow-y: overlay;
    background-color: $xr--background-color-base;
    padding: 8px 0;
    margin-top: 10px;

    .el-button {
      font-size: 12px;
      float: right;
      padding: 6px 12px;
    }
  }
}

// 设置
.table-set {
  width: 15px;
  margin-top: 5px;
  cursor: pointer;
  color: #9DA9C2;

  &:hover {
    color: $xr-color-primary;
  }
}

// 搜索到的字
.input-word {
  background-color: $xr-color-primary;
  color: white;
}

.sortable-drag {
  cursor: move;
}
</style>
